<template>
	<view class="add-quotient">
		<scroll-view scroll-y="true" style="height: calc(100vh - 120rpx);" >
			<view>
				<view class="form-content">
					
					<view class="form-item">
						<view class="form-label">
							网点名称
						</view>
						<view class="form-input">
							{{form.dotName}}
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							选商名称
						</view>
						<view class="form-input">
							{{form.customerName}}
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							行业背景
						</view>
						<view class="form-input">
							<!-- {{form.industry}} -->
							<text v-if="detail.industry==1">家居建材</text>
							<text v-if="detail.industry==0">非家居建材</text>
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							电话
						</view>
						<view class="form-input">
							{{detail.customerPhone}}
						</view>
					</view>
				
					<view class="form-item" v-if="detail.brand">
						<view class="form-label">
							品牌品类
						</view>
						<view class="form-input">
							{{detail.brand}}
						</view>
					</view>
					<view class="form-item" v-if="detail.isStore!=''">
						<view class="form-label">
							是否有店
						</view>
						<view class="form-input">
							<text v-if="detail.isStore==1">是</text>
							<text v-if="detail.isStore==0">否</text>
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							洽谈方式
						</view>
						<view class="form-input">
							{{form.contractName}}
						</view>
					</view>
				
					<view class="form-item">
						<view class="form-label">
							洽谈进度
						</view>
						<view class="form-input">
							{{form.progressName}}
						</view>
					</view>
				
					<view class="form-item" v-if="form.storeTypeName">
						<view class="form-label">
							店面类型
						</view>
						<view class="form-input">
							{{form.storeTypeName}}
						</view>
					</view>
				
					<view class="form-item" v-if="form.strPlanSigningTime">
						<view class="form-label">
							预计签约时间
						</view>
						<view class="form-input">
							{{form.strPlanSigningTime}}
						</view>
					</view>
				
					<view class="form-item" v-if="form.talkInfo">
						<view class="form-label">
							洽谈内容
						</view>
						<view class="form-input">
							{{form.talkInfo}}
						</view>
					</view>
				
					<view class="form-item" v-if="form.suspendReason">
						<view class="form-label">
							终止原因
						</view>
						<view class="form-input">
							{{form.suspendReason}}
						</view>
					</view>
					
					<view class="form-item" v-if="form.updateTime">
						<view class="form-label">
							终止时间
						</view>
						<view class="form-input">
							{{form.updateTime}}
						</view>
					</view>
					<view class="form-item" >
						<view class="form-label">
							创建时间
						</view>
						<view class="form-input">
							{{detail.createTime.slice(0,10)}}
						</view>
					</view>
					<view class="form-item" >
						<view class="form-label">
							创建人
						</view>
						<view class="form-input">
							{{detail.custName}}
						</view>
					</view>
					
					
				</view>
				
				<view class="write-wrap" v-if="detail.xdOutletsLogApproveList.length">
				
					<view class="title">
						批示
					</view>
					<view class="write-content" v-for="item in detail.xdOutletsLogApproveList" :key="item.id">
						{{item.approveInfo}}
						<view class="write-time">
							{{item.createTime.slice(0,16)}}
						</view>
						<view class="write-info">
							<view class="write-author">{{item.roleName}}</view>
							<view class="write-line"></view>
							<view class="write-author">{{item.createName}}</view>
						</view>
					</view>
				
				</view>
			</view>
		</scroll-view>

		<view class="submit-wrap">
			<!-- <view class="btn cancel">
				关闭
			</view> -->
			<view class="btn submit" @click="showApprove">
				批示
			</view>
		</view>

		<u-popup v-model="cancelShow" mode='center'>
			<view class="cancelpup">
				<view class="title">
					填写批示内容
				</view>

				<view class="tip">

					<view class="textarea-box">
						<u-input v-model="form.writeText" type="textarea" height="340" auto-height maxlength='200'
							placeholder='' />
					</view>
				</view>
				<view class="pup-btn-wrap">
					<view class="pup-btn" @click="cancelShow=false">关闭</view>
					<view class="pup-btn pup-submit" @click="approve">批示</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		followupDetail,
		getSystemDictData,
		followupApprove
	} from '@/common/service.js'
	export default {
		data() {
			return {
				cancelShow: false,
				id: '',
				detail: {},
				form: {
					writeText:'',
					dotName: '',
					talkInfo: '',
					suspendReason: '',
					strPlanSigningTime: '',
					progress: '1',
					progressName: '初次洽谈',
					outletsCode: '',
					customerName: '',
					customerPhone: '',
					contract: '',
					contractName: '',
					storeType: '',
					storeTypeName: '',
					merchantCode: ''
				},

			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			showApprove(){
				if(this.detail.status!=1){
					uni.showToast({
						icon:'none',
						title:'提交状态才可批示'
					})
					return
				}
				this.cancelShow=true
				
			},
			refresh(){
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
					uni.$emit('getList',true)
				},2000)
				
			},
			approve() {
				if(!this.form.writeText){
					uni.showToast({
						icon:'none',
						title:'请输入批示内容'
					})
					return
				}
				let data = {
					logCode: this.detail.logCode,
					approveInfo: this.form.writeText,
					roleName: this.CONFIG.user.position
				}
				this.cancelShow=false
				followupApprove(data,
					(res) => {
						if(res.data.code==200){
							console.log(res);
							uni.showToast({
								icon:'none',
								title:'批示成功'
							})
							this.refresh()
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getContractType() {
				let data = 'COOPERATE_STORE_TYPE'
				getSystemDictData(data,
					(res) => {

						this.storeTypeList = res.data.data

						if (this.form.storeType) {
							this.storeTypeList.map(item => {

								if (item.dictValue == this.form.storeType) {
									console.log(item, '店面类型');
									this.form.storeTypeName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getContractMethod() {
				let data = 'negotiation_method'
				getSystemDictData(data,
					(res) => {

						this.contractList = res.data.data
						if (this.form.contract) {
							this.contractList.map(item => {

								if (item.dictValue == this.form.contract) {

									this.form.contractName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getDictList() {
				let data = 'negotiation_progress'
				getSystemDictData(data,
					(res) => {

						this.progressList = res.data.data
						if (this.form.progress) {
							this.progressList.map(item => {

								if (item.dictValue == this.form.progress) {

									this.form.progressName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getDetail() {
				console.log(this.id);

				let data = this.id
				followupDetail(data, (res) => {
					this.detail = res.data.data
					this.form.dotName = this.detail.marketName
					this.form.outletsCode = this.detail.outletsCode
					this.form.customerName = this.detail.customerName
					this.form.merchantCode = this.detail.merchantCode
					this.form.contract = this.detail.talkType
					this.form.progress = this.detail.talkProgress
					this.form.talkInfo = this.detail.talkInfo
					this.form.storeType = this.detail.storeType
					this.form.strPlanSigningTime = this.detail.planSigningTime
					this.form.suspendReason = this.detail.suspendReason
					this.getDictList()
					this.getContractMethod()
					this.getContractType()
				}, (e) => {
					this.$refs.uToast.show({
						title: e,
						type: "error",
						duration: 3000,
					});
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.write-time{
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	.add-quotient {
		min-height: 100vh;
		background-color: #F3F5F7;
		padding-top: 10rpx;
		padding-bottom: 150rpx;
		box-sizing: content-box;

		.form-content {
			background-color: #fff;
			padding: 30rpx;
			// padding-bottom: 200rpx;
			min-height: calc(100vh - 160rpx);
		}

		.form-item {
			display: flex;
			margin-bottom: 26rpx;
		}

		.form-label {
			color: #666;
			width: 180rpx;
			margin-right: 10rpx;
			// text-align-last: justify;
		}

		.form-input {
			flex: 1;
			padding: 0 15rpx;
		}

		.form-radio {
			flex: 1;
			padding: 0 15rpx;
		}


		.submit-wrap {
			width: 100vw;
			height: 120rpx;
			background-color: #fff;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 100%;
				height: 90rpx;
				border-radius: 54rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				font-weight: 600;
			}

			.submit {
				background-color: #1DC883;
				color: #fff;

			}
		}
	}

	.submitpup {
		width: 630rpx;
		height: 292rpx;
		padding-top: 70rpx;

		.content-wrap {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			text-align: center;
		}
	}

	.cancelpup {
		width: 630rpx;
		height: 606rpx;
		padding-top: 30rpx;

		.title {
			color: #333333;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;

		}

		.tip {
			width: 100%;
			padding: 30rpx;
			color: #333;
		}
	}

	.pup-btn-wrap {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #F7F7F7;
		display: flex;

		.pup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666666;
			font-weight: 600;
			flex: 1;
			height: 100%;
		}

		.pup-submit {
			color: #1DC883;
			border-left: 1px solid #F7F7F7;
		}
	}

	.textarea-box {
		width: 100%;
		padding: 10rpx;
		background-color: #F7F7F7;
	}

	/deep/.u-mode-center-box {
		border-radius: 20rpx;
	}

	.write-wrap {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
		box-sizing: content-box;
		padding-bottom: 100rpx;
		.title {
			font-size: 32rpx;
			color: #000;
			font-weight: 600;
		}

		.write-content {
			margin-top: 20rpx;
			width: 100%;
			border-radius: 18rpx;
			background: #f5f5f5;
			padding: 20rpx 20rpx 0 20rpx;
		}

		.write-info {
			margin-top: 20rpx;
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			align-items: center;

			.write-author {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: #333;
				font-weight: 600;
			}

			.write-line {
				height: 30rpx;
				width: 2rpx;
				background-color: #D8D8D8;
			}
		}
	}
</style>